<!-- main -->
<div class="row">
  <div class="col-sm-12">
      <div class="box box-primary">
          <div class="box-header with-border">
              <div class="box-title">
                  <button class="btn btn-primary" (click)="toggleModel('addModel',null)">新增</button>
              </div>
          </div>
          <!-- 搜索框 -->
          <div class="box-header">
              <form class="form-inline">
                  <div class="form-group search-input-R2">
                      <label for="SstudentId">学号</label>
                      <input type="text" id="SstudentId" class="form-control" placeholder="学生学号"
                          [(ngModel)]="searchBody.StudentId" name="SstudentId">
                  </div>
                  <div class="form-group search-input-R2">
                      <label for="SstudentName">姓名</label>
                      <input type="text" id="SstudentName" class="form-control" placeholder="学生姓名"
                          [(ngModel)]="searchBody.StudentName" name="SstudentName">
                  </div>
                  <div class="form-group search-input-R2">
                      <button type="submit" (click)="getTaskList(1)" class="btn btn-primary btn-margin-right">查询</button>
                      <button type="submit" (click)="clearSearch()" class="btn btn-warning">重置</button>
                  </div>
              </form>
          </div>
          <!-- table -->
          <div class="box-body table-scroll-content">
              <table id="taskTable" class="table table-bordered table-hover table-striped table-keep-line">
                  <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let task of taskList">
                        <td>{{task.StudentId}}</td>
                        <td>{{task.StudentName}}</td>
                        <td>
                            <button class="btn btn-xs btn-success" (click)="toggleModel('TaskModel',task)">查看</button>
                            <button class="btn btn-xs btn-danger" (click)="delTask(task)">删除</button>
                        </td>
                    </tr>
                  </tbody>
              </table>
          </div>
          <!-- 底部页面跳转 -->
          <div class="box-footer clearfix">
            <p class="pull-left">每页
                <select [(ngModel)]="searchBody.PageSize" (ngModelChange)="getTaskList(1)" name="pagesize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                </select>个 - 共{{searchBody.Total}}个 - 当前显示第{{searchBody.PageIndex}}页 
            </p>
            <ul class="pagination pagination-sm no-margin pull-right">
                <li (click)="changePage('first',null)"><a>首页</a></li>
                <li (click)="changePage('pre',null)"><a class="fa fa-chevron-left"></a></li>
                <li *ngFor="let item of pages" (click)="changePage('page',item)" [class.active]="searchBody.PageIndex===item"><a>{{item}}</a></li>
                <li (click)="changePage('next',null)"><a class="fa fa-chevron-right"></a></li>
                <li (click)="changePage('last',null)"><a>末页</a></li>
            </ul>
         </div>
      </div>
  </div>
</div>

<!-- 新增模版 -->
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="新增">
  <div class="modal-dialog" role="document">
    <div class="modal-content col-sm-12">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">新增</h4>
      </div>
      <div class="modal-body">
        <form class="form-inline" #addForm="ngForm">
            <div class="form-group add-input col-sm-6">
                <label for="AstudentId">学号</label>
                <input type="text" class="form-control" id="AstudentId" placeholder="学生学号" required
                        [(ngModel)]="addTaskModel.StudentId" name="AstudentId">
              </div>
              <div class="form-group add-input col-sm-6">
                <label for="AstudentName">姓名</label>
                <input type="text" class="form-control" id="AstudentName" placeholder="学生姓名" required
                        [(ngModel)]="addTaskModel.StudentName" name="AstudentName">
              </div>
        </form>
      </div>
      <div class="modal-footer col-sm-12">
        <button type="button" class="btn btn-warning pull-left" (click)="clearAddModel()">重置</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" (click)="addTask()" [disabled]="!addForm.form.valid">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- 详情模版 -->
<div class="modal fade" id="TaskModel" tabindex="-1" role="dialog" aria-labelledby="详情">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">任务书</h4>
            </div>
            <div class="modal-body">
                <h3>一、题目来源及原始数据资料</h3>
                <p>{{showTaskModel.DesignSummary}}</p>

                <h3>二、毕业设计要求</h3>
                <h4>1、设计内容:</h4>
                <p>{{showTaskModel.DesignContent}}</p>

                <h4>2、研究内容:</h4>
                <p>{{showTaskModel.ResearchContent}}</p>

                <h4>3、实现功能:</h4>
                <p>移动端:{{showTaskModel.FunctionForPC}}</p>
                <p>WEB端:{{showTaskModel.FunctionForMobile}}</p>

                <h4>4、后期任务:</h4>
                <p>{{showTaskModel.LaterTask}}</p>

                <h4>5、最终提交:</h4>
                <p>{{showTaskModel.LastSumbit}}</p>
            
                <h3>三、进度安排、应完成的工作量</h3>
                <h4>1、系统需求分析：</h4>
                <p>{{showTaskModel.SystemAnalysis}}</p>

                <h4>2、系统设计：</h4>
                <p>{{showTaskModel.SystemDesign}}</p>

                <h4>3、技术准备：</h4>
                <p>{{showTaskModel.SkillReady}}</p>

                <h4>4、软件设计：</h4>
                <p>{{showTaskModel.SoftwareDesign}}</p>

                <h4>5、软件开发编程：</h4>
                <p>{{showTaskModel.SoftwareDevelop}}</p>

                <h4>6、软件程序测试：</h4>
                <p>{{showTaskModel.SoftwareTest}}</p>

                <h4>7、毕业论文撰写：</h4>
                <p>{{showTaskModel.TitleWrite}}</p>

                <h4>8、毕业论文（设计）成品初稿提交：</h4>
                <p>{{showTaskModel.TitleFristSumbit}}</p>

                <h4>9、毕业论文（设计）修改：</h4>
                <p>{{showTaskModel.TitleEdit}}</p>

                <h4>10、毕业论文（设计）答辩：</h4>
                <p>{{showTaskModel.TitleAnswer}}</p>

                <h4>11、毕业论文（设计）成品终稿提交：</h4>
                <p>{{showTaskModel.TitleLastSumbit}}</p>
        
                <h3>四、主要参考文献</h3>
                <p>{{showTaskModel.Reference}}</p>
            </div>
        </div>
    </div>
</div>